<template>
	<view class="container">
		<view class="info">
			<view class="cell">
				检查人: {{record.userName}}
			</view>
			<view class="cell">
				检查对象: {{record.targetClass}}
			</view>
			<view class="cell">
				检查时间: {{$u.timeFormat(record.time, 'hh:MM:ss')}}
			</view>
			<view class="cell">
				得分率: {{record.percentage}}
			</view>
			<view class="cell">
				检查数/项目数: {{recordNumber}}
			</view>
			<view class="cell">
				检查得分/检查总分: {{projectNumber}}
			</view>
		</view>
		
		<view class="check-title">
			检查项目
		</view>
		<view v-for="(item, index) in record.list" :key="index" class="item">
			<view class="content">
				<view class="title">
					{{index + 1}}.{{item.sortName}}
				</view>
				<view class="desc">
					评价: {{item.recordSortValue}}分
				</view>
			</view>
			<view class="multi-media-view">
				<multi-media-view v-if="item.url" :resourceUrls="item.url.split(',')"></multi-media-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getTargetRecord } from '@/api/xj.js'
	import MultiMediaView from '@/components/multi-media-view.vue'
	export default {
		components: {
			MultiMediaView
		},
		data() {
			return {
				record: {},
			}
		},
		computed: {
			recordNumber: function () {
			  return `${this.record.recordNumber}/${this.record.projectNumber}`
			},
			
			projectNumber: function () {
				return `${this.record.recordCount}/${this.record.projectCount}` 
			}
		},
		onLoad(options) {
			console.log(options);
			this.targetRecordId = options.targetRecordId;
			this.getDetail();
		},
		methods: {
			getDetail() {
				uni.showLoading({});
				getTargetRecord(this.targetRecordId).then(res => {
					console.log(res);
					uni.hideLoading();
					this.record = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		
		padding-left: $app-page-padding;
		padding-right: $app-page-padding;
		
		.info{
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			
			.cell{
				margin-top: 10rpx;
				font-weight: bold;
				color: $app-font-color;
				font-size: $app-font-size-lg;
			}
		}
		
		.check-title{
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
			color: $app-font-color;
			font-size: $app-font-size-lg;
		}
		
		.item{
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			
			.content{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				
				.title{
					color: $app-font-color;
					font-size: $app-font-size-md;
				}
				
				.desc{
					color: $app-font-color;
					font-size: $app-font-size-md;
				}
			}
			
			.multi-media-view{
				margin-top: 10rpx;
			}
		}
	}
	

</style>
